<template>
  <EcDialog v-model="dialogVisible" :auto-height="true" class="form-dialog">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <SvgIcon icon="config"/>
        云存储配置
      </div>
    </template>

    <!-- 表单数据 -->
    <el-form ref="formRef"
             v-loading="dataLoading"
             :model="formData"
             :rules="formRules"
             label-width="148px"
             status-icon>

      <el-form-item label="存储类型：" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :value="1" border>七牛云</el-radio>
          <el-radio :value="2" border>阿里云</el-radio>
          <el-radio :value="3" border disabled>腾讯云</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="formData.type === 1">
        <el-form-item label="域名：">
          <el-input v-model="formData.qiniu_domain" placeholder="七牛绑定的域名"></el-input>
        </el-form-item>
        <el-form-item label="路径前缀：">
          <el-input v-model="formData.qiniu_prefix" placeholder="不设置默认为空"></el-input>
        </el-form-item>
        <el-form-item label="AccessKey：">
          <el-input v-model="formData.qiniu_access_key" placeholder="七牛AccessKey"></el-input>
        </el-form-item>
        <el-form-item label="SecretKey：">
          <el-input v-model="formData.qiniu_secret_key" placeholder="七牛SecretKey"></el-input>
        </el-form-item>
        <el-form-item label="空间名：">
          <el-input v-model="formData.qiniu_bucket_name" placeholder="七牛存储空间名"></el-input>
        </el-form-item>
      </template>

      <template v-if="formData.type === 2">
        <el-form-item label="域名：">
          <el-input v-model="formData.aliyun_domain" placeholder="阿里云绑定的域名"></el-input>
        </el-form-item>
        <el-form-item label="路径前缀：">
          <el-input v-model="formData.aliyun_prefix" placeholder="不设置默认为空"></el-input>
        </el-form-item>
        <el-form-item label="EndPoint：">
          <el-input v-model="formData.aliyun_end_point" placeholder="阿里云EndPoint"></el-input>
        </el-form-item>
        <el-form-item label="AccessKeyId：">
          <el-input v-model="formData.aliyun_access_key_id" placeholder="阿里云AccessKeyId"></el-input>
        </el-form-item>
        <el-form-item label="AccessKeySecret：">
          <el-input v-model="formData.aliyun_access_key_secret" placeholder="阿里云AccessKeySecret"></el-input>
        </el-form-item>
        <el-form-item label="BucketName：">
          <el-input v-model="formData.aliyun_bucket_name" placeholder="阿里云BucketName"></el-input>
        </el-form-item>
      </template>

      <template v-if="formData.type === 3">
        <el-form-item label="域名：">
          <el-input v-model="formData.qcloud_domain" placeholder="腾讯云绑定的域名"></el-input>
        </el-form-item>
        <el-form-item label="路径前缀：">
          <el-input v-model="formData.qcloud_prefix" placeholder="不设置默认为空"></el-input>
        </el-form-item>
        <el-form-item label="AppId：">
          <el-input v-model="formData.qcloud_app_id" placeholder="腾讯云AppId"></el-input>
        </el-form-item>
        <el-form-item label="SecretId：">
          <el-input v-model="formData.qcloud_secret_id" placeholder="腾讯云SecretId"></el-input>
        </el-form-item>
        <el-form-item label="SecretKey：">
          <el-input v-model="formData.qcloud_secret_key" placeholder="腾讯云SecretKey"></el-input>
        </el-form-item>
        <el-form-item label="BucketName：">
          <el-input v-model="formData.qcloud_bucket_name" placeholder="腾讯云BucketName"></el-input>
        </el-form-item>
        <el-form-item label="Bucket所属地区：">
          <el-input v-model="formData.qcloud_region" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input>
        </el-form-item>
      </template>
    </el-form>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="dataLoading" @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="dataLoading" type="primary" @click="onSubmitForm()">确 定</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import { SvgIcon } from '@/components/icon';
import { EcDialog } from '@/components/dialog';
import { sysOssConfig, sysOssConfigUpdate } from '@/api/api-sys.ts';
import { useAppStore } from '@/store';

defineOptions({name: 'SysOssConfig'});

const formRef = ref<FormInstance>();
const formLoading = ref(false) // 表单是否加载中
const dialogVisible = ref(false) // 是否显示
const appStore = useAppStore();
const emit = defineEmits(['refresh']);

// 默认表单数据
let defaultForm = {
  type: 1,
  qiniu_domain: undefined,
  qiniu_prefix: undefined,
  qiniu_access_key: undefined,
  qiniu_secret_key: undefined,
  qiniu_bucket_name: undefined,

  aliyun_domain: undefined,
  aliyun_prefix: undefined,
  aliyun_end_point: undefined,
  aliyun_access_key_id: undefined,
  aliyun_access_key_secret: undefined,
  aliyun_bucket_name: undefined,

  qcloud_domain: undefined,
  qcloud_prefix: undefined,
  qcloud_app_id: undefined,
  qcloud_secret_id: undefined,
  qcloud_secret_key: undefined,
  qcloud_bucket_name: undefined,
  qcloud_region: undefined,
};

// 表单数据
const formData = ref({...defaultForm});
// 表单验证规则
const formRules = reactive<FormRules>({});

/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value;
})

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true;
  // 重置表单
  handleFormReset();

  // 加载信息
  formLoading.value = true
  try {
    // 加载用户数据
    const {data} = await sysOssConfig();
    formData.value = data;
  } finally {
    formLoading.value = false
  }
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 表单提交 */
const onSubmitForm = async () => {
  await formRef.value?.validate((valid, fields) => {
    if (!valid) {
      ElMessage({type: 'error', message: '请检查是否有必填项未完善',});
      return
    }

    const loading = ElLoading.service({
      lock: true,
      text: '正在提交中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })

    // 提交数据
    sysOssConfigUpdate(formData.value).then(response => {
      // 清理缓存令牌信息
      appStore.resetOssToken();
      // 提示信息
      ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
      // 发送操作成功的事件
      emit('refresh')
      // 隐藏窗口
      dialogVisible.value = false
    }).finally(() => loading.close())

  });
};

/** 重置表单 */
const handleFormReset = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
  // 重置界面表单数据
  formRef.value?.resetFields();
};

</script>

<style lang="scss" scoped>

</style>
